<template>
    <div class="upload-container">
        <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" :action="actionUrl"
                   :on-success="handleImageScucess" :on-error="handleImageError">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <div class="image-preview">
            <div class="image-preview-wrapper" v-show="imageUrl.length>1">
                <img :src="imageUrl">
                <div class="image-preview-action">
                    <i @click="rmImage" class="el-icon-delete"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Upload',
        props: {
            value: String
        },
        computed: {
            imageUrl() {
        return this.value
    }
    },
    data() {
        return {
            actionUrl: window.location.href.indexOf('www.come2try.com/test') >= 0 ? '/test/background/upload/public' : '/background/upload/public',
            tempUrl: '',
            dataObj: { token: '', key: '' }
        }
    },
    methods: {
        rmImage() {
            this.emitInput('')
        },
        emitInput(val) {
            this.$emit('input', val)
        },
        handleImageScucess(response, file) {
            console.dir(response)
            if (response.code != 0) {
                 this.$message.error(response.msg);
            }
            this.emitInput(response.data)
        },
        handleImageError() {
            this.$message.error('上传失败');
        },
        beforeUpload() {
        }
    }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .upload-container {
        margin-top: 10px;
        width: 100%;
        position: relative;
    @include clearfix;
    .image-uploader {
        width: 50%;
        float: left;
    }
    .image-preview {
        width: 46%;
        height: 200px;
        position: relative;
        border: 1px dashed #d9d9d9;
        float: left;
        margin-left: 4%;
    .image-preview-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    img {
        width: 100%;
        height: 100%;
    }
    }
    .image-preview-action {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, .5);
        transition: opacity .3s;
        cursor: pointer;
        text-align: center;
        line-height: 200px;
    .el-icon-delete {
        font-size: 36px;
    }
    }
    &:hover {
    .image-preview-action {
        opacity: 1;
    }
    }
    }
    .image-app-preview {
        width: 320px;
        height: 180px;
        position: relative;
        border: 1px dashed #d9d9d9;
        float: left;
        margin-left: 50px;
    .app-fake-conver {
        height: 44px;
        position: absolute;
        width: 100%; // background: rgba(0, 0, 0, .1);
        text-align: center;
        line-height: 64px;
        color: #fff;
    }
    }
    }
</style>
